<template>
	<view class="container">
		<bnn-loading :loading="state === 0"/>
		<view class="mask" v-if="loading">
			<u-loading size="60" color="#ffffff" />
		</view>
		<u-form v-show="state === 1" :error-type="errorType" class="form" :model="form" ref="uForm">
			<view class="my_form_item_wrap">
				<u-form-item  label="姓名" prop="name" required>
					<u-input style="display: block;" v-model="form.name" @click="saveData" placeholder="请输入姓名" />
				</u-form-item>
			</view>
			<view class="my_form_item_wrap">
				<u-form-item label-width="136" label="联系电话" prop="my_phone" required>
					<u-input v-model="form.my_phone" @click="saveData" maxlength="11" type="number" placeholder="请输入联系电话" />
				</u-form-item>
			</view>
			<view class="my_form_item_wrap">
				<u-form-item label-width="160" label="身份证号码" prop="id_card_number" required>
					<u-input v-model="form.id_card_number" @click="saveData" maxlength="18" type="idcard" placeholder="请输入身份证号码" />
				</u-form-item>
			</view>
			<view class="my_form_item_wrap">
				<u-form-item label-width="136" label="期货公司" prop="companyName" required>
					<u-input v-model="form.companyName" @click="showCompanySelect = true" type="select" disabled placeholder="请选择期货公司"></u-input>
					<u-select v-model="showCompanySelect" title="选择期货公司" mode="single-column" @confirm="companySelectCallback" :list="companyList"></u-select>
				</u-form-item>
			</view>
			<view class="my_form_item_wrap">
				<u-form-item label-width="136" label="期货账户" prop="account" required>
					<u-input v-model="form.account" @click="saveData" placeholder="请输入期货账户" />
				</u-form-item>
			</view>
			<view class="my_form_item_wrap">
				<u-form-item label-width="136" label="账户密码" prop="password" required>
					<u-input v-model="form.password" @click="saveData" type="password" placeholder="请输入账户密码" />
				</u-form-item>
			</view>
			
			<u-form-item class="form-item" label="上传身份证正面" label-position="top" required>
				<view class="form-upload f-cc" @click="chooseImage(true)">
					<u-image width="100px" height="100px" v-if="cardFront" :src="cardFront" />
					<view class="form-upload-plus f-cc" v-else>
						<view class="form-upload-icon uni-icon">&#xe363;</view>
						<view class="form-upload-label">选择图片</view>
					</view>
				</view>
			</u-form-item>
			<u-form-item class="form-item" label="上传身份证背面" label-position="top" required>
				<view class="form-upload f-cc" @click="chooseImage(false)">
					<u-image width="100px" height="100px" v-if="cardBack" :src="cardBack" />
					<view class="form-upload-plus f-cc" v-else>
						<view class="form-upload-icon uni-icon">&#xe363;</view>
						<view class="form-upload-label">选择图片</view>
					</view>
				</view>
			</u-form-item>
			<view class="my_form_item_wrap">
				<u-form-item label-width="160" label="紧急联系人" prop="emergency_contact" required>
					<u-input v-model="form.emergency_contact" @click="saveData" placeholder="请输入紧急联系人" />
				</u-form-item>
			</view>
			<view class="my_form_item_wrap">
				<u-form-item label-width="210" label="紧急联系人电话" prop="emergency_contact_phone" required>
					<u-input v-model="form.emergency_contact_phone" @click="saveData" maxlength="11" type="number" placeholder="请输入紧急联系人电话" />
				</u-form-item>
			</view>
			<view class="form-btns">
				<view class="form-tips">使用过程中请勿修改期货账户密码</view>
				<button class="form-btn" @click="submit()" :disabled="!form.isRead">提交</button>
				<view class="form-protocol"><span @click="viewProtocol('risk_deal')">《风险协议》</span><span @click="viewProtocol('purchase_agreement')">《软件使用协议》</span></view>
				<u-form-item prop="isRead" :border-bottom="false">
					<u-checkbox v-model="form.isRead" size="24" label-size="24" active-color="#1296DB">已阅读并同意</u-checkbox>
				</u-form-item>
			</view>
		</u-form>
	</view>
</template>

<script>
	import BnnLoading from '@/components/bnn-ui/loading/index.vue'
	import {
		getStrategyCompanyList,
		postStrategyAccount,
		postStrategyAccountGet,
		uploadImage
	} from '@/api/member.js'
	export default {
		components: { BnnLoading },
		data() {
			return {
				
				//------------------
				state: 0, //0.初始化 1.表单渲染
				loading: false,
				rules: {
					name: [{
						required: true,
						message: '请输入姓名'
					}],
					my_phone: [{
						required: true, 
						message: '请输入手机号'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确'
					}],
					id_card_number: [{
						required: true,
						message: '请输入身份证号码',
					},{
						validator: (rule, value, callback) => {
							return this.$u.test.idCard(value);
						},
						message: '身份证号码不正确'
					}],
					companyName: [{
						required: true,
						message: '请选择期货公司'
					}],
					account: [{
						required: true,
						message: '请输入期货账户'
					}],
					password: [{
						required: true,
						message: '请输入账户密码'
					}],
					emergency_contact: [{
						required: true,
						message: '请输入紧急联系人'
					}],
					emergency_contact_phone: [{
						required: true,
						message: '请输入紧急联系人电话',
					},{
						validator: (rule, value, callback) => {
							if (value) {
								return this.$u.test.mobile(value);
							}
							callback()
						},
						message: '紧急联系人电话不正确'
					}]
				},
				errorType: ['toast'],
				companyList: [],
				showCompanySelect: false,
				form: {},
				cardFront: null,
				cardBack: null
			}
		},
		onLoad() {
			this.init()
		},
		onReady() {
			// 初始化载入表单验证规则
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 初始化页面
			init: function() {
				this.getCompanyList()
			},
			// 查询已注册信息
			reqStrategyAccount: function() {
				postStrategyAccountGet().then(res => {
					if (res.code == 200) {
						if (res.data) {
							const data = res.data
							let form = {
								name: data.name || '',
								account: data.account || '',
								password: data.password || '',
								broker_id: data.broker_id || '',
								id_card_number: data.id_card_number || '',
								id_card_front: data.id_card_front || '',
								id_card_back: data.id_card_back || '',
								my_phone: data.my_phone || '',
								emergency_contact: data.emergency_contact || '',
								emergency_contact_phone: data.emergency_contact_phone || ''
							}
							if (form.broker_id) {
								this.companyList.map(item => {
									if (form.broker_id == item.value) {
										form.companyName = item.label
									}
								})
							}
							if (form.id_card_front) this.cardFront = form.id_card_front
							if (form.id_card_back) this.cardBack = form.id_card_back
							this.form = form
						}
					}
					this.state = 1
				})
			},
			// 存储注册信息
			saveData: function() {
				let data = {type: 0 }
				let formData = this.form
				Object.keys(formData).map((key)=> {
					data[key] = formData[key]
				})
				if (data.isRead) delete data.isRead
				if (data.companyName) delete data.companyName
				postStrategyAccount(data).then(res=> {
					this.loading = false
				}).catch((err) => {
					this.loading = false
				})
			},
			// 查询期货公司列表
			getCompanyList: function() {
				getStrategyCompanyList().then(res => {
					if(res.code === 200) {
						this.companyList = res.data.map(item => {
							return {
								label: item.name,
								value: item.id
							}
						})
					}
					this.reqStrategyAccount()
				}).catch((err) => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},
			// 选择期货公司
			companySelectCallback: function(data) {
				this.form.companyName = data[0].label
				this.form.broker_id = Number(data[0].value)
				this.saveData()
			},
			// 上传照片
			chooseImage: function(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						let imageSrc = res.tempFilePaths[0]
						uploadImage(imageSrc).then(res1=> {
							if (type) {
								this.form.id_card_front = res1.data.url
								this.cardFront = imageSrc
							}else {
								this.form.id_card_back = res1.data.url
								this.cardBack = imageSrc
							}
						}).catch(err=> {
							
						})
					},
					fail: (err) => {
						uni.showToast({title: '文件错误', icon: 'none'})
					}
				})
			},
			// 查看协议
			viewProtocol: function(type) {
				uni.navigateTo({
					url: '../protocol/index?type='+type
				})
			},
			// 提交表单
			submit: function() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let data = { type: 1}
						let formData = this.form
						Object.keys(formData).map((key)=> {
							data[key] = formData[key]
						})
						if (!this.cardFront) {
							uni.showToast({
								title: '请上传身份证正面',
								icon: 'none'
							})
							return
						}
						if (!this.cardBack) {
							uni.showToast({
								title: '请上传身份证背面',
								icon: 'none'
							})
							return
						}
						delete data.isRead
						delete data.companyName
						this.loading = true
						postStrategyAccount(data).then(res=> {
							if (res.code === 200) {
								uni.showToast({
									title: '提交成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 2000)
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
								this.loading = false
							}
						}).catch((err) => {
							this.loading = false
							uni.showToast({
								title: err.message,
								icon: 'none'
							})
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my_form_item_wrap{
		padding: 8px 12px;
		background: #FFFFFF;
		margin-bottom: 12rpx;
	}
	.oh {
		overflow: hidden;
	}
	.mask {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
		background-color: rgba(0, 0, 0, 0.1);
	}
	.form {
		padding: 8px 12px;
		.f-cc {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.u-form-item {
			padding: 0;
		}
		.form-item {
			display: flex;
			background-color: #ffffff;
			margin-bottom: 6px;
			border-radius: 4px;
			padding: 8px 12px;
			.form-upload {
				width: 100px;
				height: 100px;
				background-color: #f4f5f6;
				border-radius: 5px;
				margin: 5px;
				overflow: hidden;
				.form-upload-plus {
					flex-direction: column;
					color: #606266;
					font-size: 13px;
				}
			}
		}
		.form-btns {
			margin-top: 16px;
			display: flex;
			align-items: center;
			flex-direction: column;
			.form-tips {
				color: #C0C0C0;
				font-size: 12px;
				font-weight: 600;
				margin-bottom: 4px;
			}
			.form-btn {
				width: 100%;
				height: 32px;
				line-height: 32px;
				font-size: 14px;
				background-color: #1296DB;
				color: #ffffff;
				border: 0;
				margin-bottom: 6px;
				&[disabled] {
					background-color: #cccccc;
				}
			}
			.form-protocol {
				color: #1296DB;
				font-size: 12px;
				font-weight: 600;
			}
		}
	}
</style>
